<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cartzilla | Dev environment setup</title>
    <!-- SEO Meta Tags-->
    <meta name="description" content="Cartzilla - Bootstrap E-commerce Template">
    <meta name="keywords" content="bootstrap, shop, e-commerce, market, modern, responsive,  business, mobile, bootstrap, html5, css3, js, gallery, slider, touch, creative, clean">
    <meta name="author" content="Createx Studio">
    <!-- Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon and Touch Icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
    <link rel="manifest" href="../site.webmanifest">
    <link rel="mask-icon" color="#fe6a6a" href="../safari-pinned-tab.svg">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <!-- Vendor Styles including: Font Icons, Plugins, etc.-->
    <link rel="stylesheet" media="screen" href="../vendor/simplebar/dist/simplebar.min.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/tiny-slider/dist/tiny-slider.css"/>
    <!-- Main Theme Styles + Bootstrap-->
    <link rel="stylesheet" media="screen" href="../css/theme.min.css">
    <!-- Google Tag Manager-->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WKV3GT5');
    </script>
  </head>
  <!-- Body-->
  <body>
    <!-- Google Tag Manager (noscript)-->
    <noscript>
      <iframe src="//www.googletagmanager.com/ns.html?id=GTM-WKV3GT5" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
    </noscript>
    <main class="container-fluid">
      <!-- Main content-->
      <section class="offcanvas-enabled row pb-3 pb-md-4">
        <div class="col-xxl-9">
          <!-- Navbar-->
          <header class="navbar navbar-expand navbar-light fixed-top bg-light shadow-sm px-3 px-lg-4" data-scroll-header data-fixed-element><a class="navbar-brand d-lg-none" href="dev-setup.html"><img src="../img/logo-dark.png" width="142" alt="Cartzilla"></a>
            <ul class="navbar-nav ms-auto d-none d-lg-flex">
              <li class="nav-item"><a class="nav-link" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live preview</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
              <li class="nav-item"><a class="nav-link" href="../components/typography.html"><i class="ci-server align-middle mt-n1 me-2"></i>Components</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
            </ul>
            <button class="navbar-toggler d-block d-lg-none ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#docs-nav"><span class="navbar-toggler-icon"></span></button><a class="btn btn-primary btn-shadow ms-2 ms-lg-4" href="https://themes.getbootstrap.com/product/cartzilla-bootstrap-e-commerce-template-ui-kit/" target="_blank" rel="noopener"><i class="ci-cart me-2 d-none d-sm-inline-block"></i>Buy now</a>
          </header>
          <!-- Side navigation-->
          <aside class="offcanvas offcanvas-expand bg-dark" id="docs-nav">
            <div class="offcanvas-cap bg-darker d-none d-lg-block"><a class="navbar-brand py-1" href="dev-setup.html"><img src="../img/logo-light.png" width="142" alt="Cartzilla"></a><span class="badge bg-success">Docs</span></div>
            <div class="offcanvas-cap bg-darker align-items-center d-flex d-lg-none">
              <div class="d-flex align-items-center">
                <h5 class="text-light mb-0 me-2">Menu</h5><span class="badge bg-success">Docs</span>
              </div>
              <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body" data-simplebar data-simplebar-auto-hide="true">
              <div class="pt-4 pb-3 mt-lg-3">
                <div class="d-flex d-lg-none pb-4 mb-4 border-bottom border-light"><a class="btn btn-outline-light btn-sm me-3" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live demo</a><a class="btn btn-light btn-sm" href="../components/typography.html"><i class="ci-server align-middle mt-n1 me-2"></i>Components</a></div>
                <div class="widget widget-links widget-light mb-4 pb-2">
                  <h3 class="widget-title text-white">Contents</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item active"><a class="widget-list-link" href="dev-setup.html">Dev environment setup</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="working-with-gulp.html">Working with Gulp</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="project-structure.html">Project structure</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="install-vendor-plugin.html">Installing Vendor plugins with npm and Gulp</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="using-preprocessors.html">Using Pug &amp; Sass</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="autoprefixer.html">Browser support</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="global-colors.html">Global colors</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="components.html">Components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="navbar-footer.html">Navbar / Page title / Footer variants (Pug)</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="utilities.html">Utility classes</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="ui-icons.html">UI icons (Icon font)</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="mailchimp.html">Mailchimp subscription form</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="credits.html">Sources and credits</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="changelog.html">Changelog</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </aside>
          <!-- Page title-->
          <div class="border-bottom mt-lg-2 pt-5 pb-2 mb-5">
            <h1 class="mt-3 mt-lg-4 pt-5">Dev environment setup</h1>
          </div>
          <div class="pb-5">
            <div class="alert alert-info d-flex fs-md mb-4" role="alert">
              <div class="alert-icon fs-lg"><i class="ci-announcement"></i></div>
              <div><strong>Please note:</strong> this step is absolutely optional. It aims for advanced user who want to speed up development process with professional grade Front-End toolset shiped with Cartzilla. If you are not familiar with these tools and have no time to dive in you can still use plain HTML / CSS / JS to customize Cartzilla. Files you need are located inside <strong>Cartzilla/dist</strong> folder. In this case you can skip this and next sections. Happy coding :)</div>
            </div>
            <p class="fs-lg fw-medium text-dark">Cartzilla is built using modern development toolset.</p><img src="../img/docs/technologies.png" alt="Technologies">
            <div class="my-4">
              <dl>
                <dt>Node.js <a href="https://nodejs.org/en/" target="_blank" rel="noopener">Official website</a></dt>
                <dd class="pb-3 border-bottom">Is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.</dd>
                <dt>Gulp <a href="https://gulpjs.com/" target="_blank" rel="noopener">Official website</a></dt>
                <dd class="pb-3 border-bottom">The JavaScript task runner. It helps with performing repetitive tasks like minification, compilation, unit testing, linting, etc. This is possible thanks to extensive Gulp Plugins library.</dd>
                <dt>Sass (Syntactically Awesome Style Sheets) <a href="http://sass-lang.com/" target="_blank" rel="noopener">Official website</a></dt>
                <dd class="pb-3 border-bottom">Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass gives you the power of variables, mixins, functions, etc.</dd>
                <dt>Pug (former Jade) <a href="https://pugjs.org/api/getting-started.html" target="_blank" rel="noopener">Official website</a></dt>
                <dd class="pb-3 border-bottom">Pug is a high performance Node.js Templating Engine. Just like SASS, Pug is a prepocessor and, as such it helps you accomplishing tasks like wrapping away repetitive work by providing features not available in plain HTML like variables, includes, mixins, functions, etc.</dd>
                <dt>Bootstrap <a href="http://getbootstrap.com" target="_blank" rel="noopener">Official website</a></dt>
                <dd class="pb-3 border-bottom">Latest version of the most popular HTML, CSS, and JS framework in the world. Cartzilla is built on Bootstrap and heavily depends on it. Cartzilla has all BS4 components + bunch of own plugins and components.</dd>
              </dl>
            </div>
            <p class="mb-4"><u>This section will explain how to setup professional Front-End development environment for fast and smooth Cartzilla customization using these technologies.</u></p>
            <h2 class="h4 pt-3">Text Editor and Terminal (Command Line)</h2>
            <p>
               You can use any text editor at your disposal and available Command line tool (Command Prompt for Windows or Terminal on MacOS). Our personal preference is <a class="fw-medium" href="https://code.visualstudio.com/" target="_blank" rel="noopener">Visual Studio Code.</a> It is free, has great buil-in terminal (console), built-in git client, debugging, huge extensions library and available for MacOS, Windows, Linux.</p>
            <h2 class="h4 pt-3">Installing Node.js and npm</h2>
            <p>In order to be able to setup Cartzilla development environment you will need to <strong>install Node.js and its Package Manager (npm)</strong>.</p>
            <p>
               Node.js is absolutely free and available for download via its official website for MacOS, Windows, Linux systems. <a class="fw-medium" href="https://nodejs.org/en/" target="_blank" rel="noopener">Download Node.js and npm here.</a></p>
            <p>Learn more about Node Package Manager and available packages here: <a class="fw-medium" href="https://www.npmjs.com" target="_blank" rel="noopener">https://www.npmjs.com</a></p>
            <h2 class="h4 pt-3">Installing packages necessary for Cartzilla development</h2>
            <p>When Node.js and npm is installed you are ready to install all dependencies necessary for Cartzilla development.</p>
            <u class="d-block mb-3">Inside your command line tool type:</u><kbd class="d-inline-block mb-3">npm install</kbd>
            <p>This will start the process of installing all dependencies which are listed inside <code>Cartzilla/package.json</code> file. Wait until installation is finished and jump to the next section <a class="fw-medium" href="working-with-gulp.html">Working with Gulp.</a></p>
          </div>
        </div>
      </section>
    </main>
    <!-- Back To Top Button--><a class="btn-scroll-top" href="#top" data-scroll data-fixed-element><span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span><i class="btn-scroll-top-icon ci-arrow-up">   </i></a>
    <!-- Vendor scrits: js libraries and plugins-->
    <script src="../vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/simplebar/dist/simplebar.min.js"></script>
    <script src="../vendor/tiny-slider/dist/min/tiny-slider.js"></script>
    <script src="../vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <!-- Main theme script-->
    <script src="../js/theme.min.js"></script>
  </body>
</html>